<template>
	<el-form ref="form" :rules="rules" :model="form" label-width="80px">
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="学员姓名">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="证件号码">
				<el-input v-model="form.idCard"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="缴费时间" prop="payDate">
				<el-date-picker :picker-options="pickerOptions" v-model="form.payDate" type="daterange" placeholder="选择缴费时间..." value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="付费类型">
				<el-select v-model="form.payType">
					<el-option value="" label="所有"></el-option>
					<el-option value="1" label="一次性缴费"></el-option>
					<el-option value="2" label="分期付款"></el-option>
					<el-option value="4" label="包库学员"></el-option>
				</el-select>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="付款方式">
				<el-select v-model="form.paymentMethod">
					<el-option value="" label="所有"></el-option>
					<el-option value="3" label="现金"></el-option>
					<el-option value="4" label="刷卡"></el-option>
					<el-option value="1" label="支付宝"></el-option>
					<el-option value="2" label="微信"></el-option>
				</el-select>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="状态">
				<el-select v-model="form.deleteFlag">
					<el-option value="" label="所有"></el-option>
					<el-option value="2" label="作废中"></el-option>
					<el-option v-for="item in $dicCache.getCacheByMark('SFDM')" :key="item.dicVal" :label="item.dicName=='是'?'已作废':'正常'" :value="item.dicVal"></el-option>
				</el-select>
			</el-form-item>
		</el-col>
		<el-button class="submit" round @click="submitForm">提 交</el-button>
		<resultTable v-model="tableShow" :queryData="form"></resultTable>
	</el-form>
</template>

<script>
	import resultTable from "@/components/zhcx/table-bmf";
	
	export default {
		name: "query-bmf",
		components: {
			resultTable
		},
		data() {
			return {
				form: {
					name: '',
					idCard: '',
					payDate: [],
					payType: '',
					paymentMethod: '',
					deleteFlag: '0'
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				rules:{
					payDate: [
						{required: true, message: "请选择缴费时间！", trigger: "blur"}
					],
				},
				tableShow: false
			};
		},
		methods: {
			submitForm() {
				this.$refs.form.validate(valid => {
					if (!valid) {
						return false;
					}
					this.tableShow = true;
				});
			}
		}
	}
</script>

<style scoped>
.el-range-editor.el-input__inner{
	width: 100% !important;
}
	.selectC-cont-item .el-select {
		width: 100%;
	}
	
	.submit {
		padding: 12px 64px !important;
		background: url("/static/img/jianbian.jpg");
		background-size: 100% 100%;
		height: 40px !important;
		border: 0 !important;
		color: #fff;
		margin: 0 auto;
		display: block !important;
		position: relative;
		top: 50px;
	}
</style>